<template>
    <div>
        <template>
            <!--页头组件-->
            <el-page-header style="background-color: #0095d7;color: #ffffff;line-height: 60px"
                            @back="goReturn" content="增加咨询页面"></el-page-header>
            <!--分割线-->
            <el-divider></el-divider>

            <el-card>
                <el-form :model="information" :rules="rules" ref="ruleForm">

                    <el-form-item prop="title" label="标题" label-width="80px">
                        <el-input v-model="information.title"></el-input>
                    </el-form-item>

                    <el-form-item label="图片" label-width="80px">
                        <el-upload
                                action="http://176.17.10.223:18082/information/upload"
                                name="picFile"
                                :limit="1"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-success="handleSuccess"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img  width="100%" :src="dialogImageUrl" alt="" />
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="正文">
                        <el-tiptap
                                v-model="information.content"
                                :extensions="extensions"
                                placeholder="请输入内容 …"
                                width="50%"
                                height="200"
                                lang="zh"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button v-on:click="add('ruleForm')">增加资讯</el-button>
                    </el-form-item>
                </el-form>

            </el-card>i

        </template>
    </div>
</template>

<script>
    import {
        Bold,
        BulletList, CodeBlock,
        Doc, Fullscreen,
        Heading,
        HorizontalRule,
        Italic,
        ListItem, OrderedList,
        Paragraph, Preview,
        Strike,
        Text, TextColor, TodoItem, TodoList,
        Underline
    } from "element-tiptap";
    export default {

        data() {
            return {
                extensions: [
                    new Doc(),
                    new Text(),
                    new Paragraph(),
                    new Heading({level: 6}),
                    new Bold({bubble: true}), // 在气泡菜单中渲染菜单按钮
                    new Underline(), //下划线
                    new Italic(),
                    new Strike(),
                    new HorizontalRule(),
                    new ListItem(),
                    new BulletList(),
                    new OrderedList(),
                    new TodoItem(),
                    new TodoList(),
                    new Fullscreen(),
                    new Preview(),
                    new CodeBlock(),
                    new TextColor()
                ],
                dialogImageUrl: '',
                dialogVisible: false,
                isEnable:'',
                information:{
                    id:"",
                    title:"",
                    content:"",
                },

                rules:{
                    title:[
                        {required: true, message: '请输入标题', trigger:'blur'},
                        {min: 4, max:15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
                        ],
                    content:[
                        {required: true, message: '请输入标题', trigger:'blur'},
                        {min: 4,  message: '长度在 4 到 15 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {

            add(){
                let url = 'http://176.17.10.223:18082/information/add-new'
                let data = 'title='+ this.information.title +
                        '&img=' + this.information.img +
                        '&content=' + this.information.content;
                this.axios.post(url,data).then((response) =>{
                        let message = response.data.message;
                    if (message == null) {
                        this.$message({
                            message: '添加咨询成功',
                            type: 'success'
                        });
                        //提交之后返回到用户管理页面
                        this.$router.push({path: '/admin/manage/news'});//页面路由刷新
                    }else {
                        console.log(message);
                        this.$message.error(message)
                    }
                })
            },


            //删除文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //当点击删除图片时方法会执行
                //file代表要删除的文件
                //file.response代表文件上传成功时 服务器响应的数据(文件名)
                console.log("文件名="+file.response);
                //http://176.17.10.223:8080/remove?name=xxx.jpg
                let url = "http://176.17.10.223:18082/information/remove"
                let data = 'name=' + file.response;
                this.axios.post(url,data).then((response) => {
                    console.log("服务器图片已经删除")
                })
            },

            //上传文件成功
            handleSuccess(response,file,fileList){
                //response=file.response
                console.log("文件上传完成, 图片名="+response);
                this.information.img = response;
            },
            //上传文件
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            goReturn(){
                //返回上一页面
                history.back();
            }
        }
    }
</script>




<style>
    .el-input__inner {
        width: 500px;
    }
    .el-card{
        width: 100%;
        height: 100%;
    }
</style>